<template>
  <div class="board-div">js拖拽缩放
    <div
      class="board-right board-back"
      style="overflow: hidden; position: relative"
      id="box"
    >
      <div id="wheel_div">
        <canvas
          id="myCanvas"
          width="100%"
          height="100%"
        ></canvas>
      </div>
      <div class="log"></div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(function () {
      this.pan();
      this.zoom();
    });
    this.essixt();
  },
  methods: {
    essixt() {
      const deps = {
        采购部: [1, 2, 3],
        人事部: [5, 8, 12],
        行政部: [5, 14, 79],
        运输部: [3, 64, 105],
      };
      let member = [];
      for (let item in deps) {
        const value = deps[item];
        if (Array.isArray(value)) {
          member = [...member, ...value];
        }
      }
      member = [...new Set(member)];
      let members = Object.values(deps).flat(Infinity);
      const fn1 = () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(1);
          }, 300);
        });
      };
      const fn2 = () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(2);
          }, 600);
        });
      };
      const fn = () => {
        fn1().then((res1) => {
          console.log(res1); // 1
          fn2().then((res2) => {
            console.log(res2);
          });
        });
      };
      fn();
    },
    // 拖拽
    zoom() {
      var box = document.getElementById("box"); // 大盒子
      var drag = document.getElementById("wheel_div"); // 小盒子盒子
      // 点击某物体时，用drag对象即可，move和up是全局区域，
      // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
      drag.onmousedown = function (event) {
        var event = event || window.event; //兼容IE浏览器
        //  鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离

        var diffX = event.pageX - drag.offsetLeft;
        var diffY = event.pageY - drag.offsetTop;
        if (typeof drag.setCapture !== "undefined") {
          drag.setCapture();
        }
        document.onmousemove = function (event) {
          var event = event || window.event;
          var moveX = event.pageX - diffX;
          var moveY = event.pageY - diffY;
          drag.style.left = moveX + "px";
          drag.style.top = moveY + "px";
          // 限制在父元素box区域内()
          if (moveX < -drag.offsetWidth / 2) {
            drag.style.left = -drag.offsetWidth / 2 + "px";
          }
          if (moveX > box.offsetWidth - drag.offsetWidth / 2) {
            drag.style.left = box.offsetWidth - drag.offsetWidth / 2 + "px";
          }
          if (moveY < -drag.offsetHeight / 2) {
            drag.style.top = -drag.offsetHeight / 2 + "px";
          }
          if (moveY > box.offsetHeight - drag.offsetHeight / 2) {
            drag.style.top = box.offsetHeight - drag.offsetHeight / 2 + "px";
          }
        };
        document.onmouseup = function (event) {
          this.onmousemove = null;
          this.onmouseup = null;
          //修复低版本ie bug
          if (typeof drag.releaseCapture != "undefined") {
            drag.releaseCapture();
          }
        };
      };
    },
    // 缩放
    pan() {
      var drag = document.getElementById("wheel_div");
      let scal = 1;
      let maxScal = 1.2; // 最大缩放
      let minScal = 0.7;
      function onMouseWheel(ev) {
        /*当鼠标滚轮事件发生时，执行一些操作*/
        var ev = ev || window.event;
        var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
        down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
        if (down) {
          scal <= minScal ? "" : (scal = (parseFloat(scal) - 0.06).toFixed(2));
          drag.style.transform = "scale(" + scal + ")"; //scale()在这里要使用拼接的方式才能生效。
          // drag.style.transformOrigin = "0 0"; // 已canvas为原点缩放
        } else {
          scal >= maxScal ? "" : (scal = (parseFloat(scal) + 0.06).toFixed(2));
          drag.style.transform = "scale(" + scal + ")";
        }
        if (ev.preventDefault) {
          /*FF 和 Chrome*/
          ev.preventDefault(); // 阻止默认事件
        }
        return false;
      }
      addEvent(box, "mousewheel", onMouseWheel);
      addEvent(box, "DOMMouseScroll", onMouseWheel);
      function addEvent(obj, xEvent, fn) {
        if (obj.attachEvent) {
          obj.attachEvent("on" + xEvent, fn);
        } else {
          obj.addEventListener(xEvent, fn, false);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#box {
  width: 100%;
  height: 500px;
  border: 2px solid red;
}
#wheel_div {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid #3368b8;
  text-align: center;
  background: pink;
}
</style>